<template>
  <v-dialog v-model="open" width="600px">
    <v-card title="图库">
      <v-card-item class="pb-6">
        <div style="height: 300px; overflow: auto;">
          <div class="d-flex align-start flex-wrap">
            <el-image @click="checked(item.id, item.src)" class="elevation-3 mr-2 mb-2" fit="contain" v-for="(item, index) in images" :key="index" :src="item.src" style="width: 100px; border-radius: 4px;" :preview-src-list="[]" />
          </div>
        </div>
      </v-card-item>
    </v-card>
  </v-dialog>
</template>
  
<script setup>
import { listGallery } from "@/api/mes/gallery";
import { getThumbImg } from "@/utils/index";
import { watch } from "vue";
const emits = defineEmits(["checked"]);
const open = ref(false);
const images = ref([]);

function getImagesData() {
  listGallery({
    pageNum: 1,
    pageSize: 10,
  }).then((res) => {
    images.value = res.rows;
    images.value.forEach((item) => {
      getThumbImg(item.id).then((data) => {
        item.src = data;
      });
    });
    // total.value = res.total;
    // tableLoading.value = false;
  });
}
function checked(id, src) {
  emits("checked", {
    id,
    base64: src,
  });
  open.value = false
}
watch(open, () => {
  if (open.value && images.value.length === 0) {
    getImagesData()
  }
})
defineExpose({
  open,
});
</script>
  
  <style lang="scss" scoped>
</style>